<template>
  <div class="app-container">
    <div class="search-bar">
      <el-form ref="form" :model="searchData" label-width="80px" size="mini">
        <el-row :gutter="10">
          <el-col :span="3.5">
            <el-form-item label="起始日期">
              <el-date-picker
                v-model="searchData.startTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                style="width:130px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="3.5">
            <el-form-item label="截止日期">
              <el-date-picker
                v-model="searchData.endTime"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
                style="width:130px"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="">
              <el-button type="primary" size="mini" @click="search">查 询</el-button>
              <el-button size="mini" @click="reset">清 空</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="content">
      <el-table :data="tableData" border style="width: 100%"
                :header-cell-style="{height:'30px',padding:'0px',fontSize:'14px'}"
                :row-style="{height:'25px'}"
                :cell-style="{padding:'1px'}"
                show-summary :summary-method="getSummaries">
        <!--        <el-table-column type="index" width="50" />-->
        <el-table-column
          prop="plan_areaNO"
          label="作业区"
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="totalWellsNum"
          label="计划井数"
          sortable
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="doWellNum"
          label="已实施井数"
          sortable
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="notDoWellNum"
          label="未实施井数"
          sortable
          header-align="center"
          align="center"
        />
        <el-table-column
          prop="doWellNameList"
          label="已实施井号"
          header-align="center"
          align="center"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.doWellNameList.join() }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="notDoWellNameList"
          label="未实施井号"
          :show-overflow-tooltip="true"
          header-align="center"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.notDoWellNameList.join() }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchData: {},
      tableData: []
    }
  },
  created() {
    this.getListPage(this.searchData)
  },
  methods: {
    getListPage(data) {
      this.$http.post('/cycleHotwashdes/countNum', data).then(({ data: { data: res }}) => {
        this.tableData = res
      }).catch(err => {
        this.$message.error(err)
      })
    },
    search() {
      this.getListPage(this.searchData)
    },
    reset() {
      this.searchData = {}
    },
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (index !== 4 && index !== 5) {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
        } else {
          sums[index] = '--'
        }
      })
      return sums
    }
  }
}
</script>

<style scoped>

</style>
